<template>
  <div class="history-page">
    <HistoryPanel ref="historyPanelRef" />
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import HistoryPanel from '@/pages/hist/components/HistoryPanel.vue'
import eventBus from '@/pages/hist/utils/eventBus'

const historyPanelRef = ref(null)

// 刷新历史记录的方法
const refreshHistory = () => {
  if (historyPanelRef.value) {
    historyPanelRef.value.refreshHistory()
  }
}

// 监听生成成功事件
const handleGenerationSuccess = () => {
  refreshHistory()
}

// 暴露刷新方法给父组件
defineExpose({
  refreshHistory
})

// 组件挂载时监听事件
onMounted(() => {
  eventBus.on('generation-success', handleGenerationSuccess)
})

// 组件卸载前移除事件监听
onBeforeUnmount(() => {
  eventBus.off('generation-success', handleGenerationSuccess)
})
</script>

<style scoped>
.history-page {
  height: 100%;
  background-color: #f5f7fa;
}

/* 移动端适配 */
@media screen and (max-width: 768px) {
  .history-page {
    height: calc(100vh - 100px); /* 减去头部和底部导航的高度 */
  }
}
</style> 